<template>
   <div class="detailBaseInfo" v-if="Object.keys(goods).length!==0" >
      <div class="title">{{goods.title}}</div>
     <div class="price">
     <span>{{goods.newPrice}}</span>
     <span>{{goods.oldPrice}}</span>
     <span v-if="goods.discount" class="discount">{{goods.discount}}</span>
     </div>
     <div class="other">
       <span>{{goods.columns[0]}}</span>
       <span>{{goods.columns[1]}}</span>
       <span>{{goods.services[goods.services.length-1].name}}</span>
     </div>
     <div class="service">
        <span class="service-item" v-for="index in goods.services.length-2" :key="index">
          <img :src="goods.services[index+1].icon" alt="">
          <span>{{goods.services[index+1].name}}</span>
        </span>
     </div>
   </div>
</template>

<script>
  export default {
    name: "DetailBaseInfo",
    props:{
      goods:{
        type:Object
      }
    }
  }
</script>

<style scoped>
.title{
  padding: 10px;
  font: bold 20px '微软雅黑';
}
.price{
  padding: 8px;

}
 .price span:nth-of-type(1){
   font: 25px "微软雅黑";
   color: var(--color-high-text);
   padding-left: 6px;

 }
.price span:nth-of-type(2){
  font: 10px "微软雅黑";
  padding-left: 4px;
  text-decoration: line-through;

}
.price span:nth-of-type(3){
  font: 10px "微软雅黑";
  color: white;
  background-color: var(--color-tint);
  border-radius: 5px;
  position: relative;
  top: -3px;
  left: 2px;
}
.other{
  padding:10px;
  display: flex;
  box-shadow: 0 5px 1px rgba(100,100,100,0.1);
}
 .other span{
   font: 15px "微软雅黑";
   flex: 1;
 }
.other span:nth-of-type(1){
   text-align: left;
}

.other span:nth-of-type(2){
  text-align: center;
}
.other span:nth-of-type(3){
   text-align: right;
}
.service{
  box-shadow: 0 6px 1px rgba(100,100,100,0.1);
  padding: 20px 10px;
  display: flex;
  font-size: 15px;
}
.service>span{
  flex: 1;
}
.service>span:nth-of-type(1){
  text-align: left;
}
.service>span:nth-of-type(2){
  text-align: center;
}
.service>span:nth-of-type(3){
  text-align: right;
}
.service span img{
    width: 20px;
    height: 20px;
  }
</style>
